/**
 * 学习目标：useEffect - 清理操作
 *    语法：
 *      useEffect() 内部返回的回调函数，会在组件卸载时自动执行
 *      相当于类组件的 componentWillUnmount
 *    作用：
 *      执行清除操作（如：清理定时器，清理全局注册的事件，清理订阅等）
 */
import { useEffect, useState } from 'react'

export default function App() {
  const [isShow, setIsShow] = useState(false)
  return (
    <div>
      <h1>useEffect-清理操作</h1>
      <button onClick={() => setIsShow(!isShow)}>点击切换显示卡片组件</button>
      {isShow ? <Card /> : null}
    </div>
  )
}

function Card() {
  const fn = () => {
    console.log('窗口大小变化了')
  }

  useEffect(() => {
    console.log('组件挂载！！！')
    // 注册事件
    window.addEventListener('resize', fn)
  }, [])

  useEffect(() => {
    // useEffect 内部返回的回调函数，会在组件卸载时自动执行
    return () => {
      console.log('组件卸载了~~~')
      // 清理事件
      window.removeEventListener('resize', fn)
    }
  }, [])

  return (
    <div>
      <h2>卡片组件</h2>
    </div>
  )
}
